<template>
  <div class="bgc-default pad-20">
    <div class="bg-color-white pad-l-20 pad-r-20 pad-t-20">
      <div>
        <el-button type="primary" @click="buttonAdd">添加等级</el-button>
      </div>
      <!-- 内容列表 -->
      <div class="table-container">
        <el-table ref="multipleTable" :data="gradeList" v-loading="listLoading"
          element-loading-text="加载中" header-cell-class-name="default-header" row-class-name="default-row"
          style="width: 100%">
          <el-table-column label="等级值" prop="gradeValue">
          </el-table-column>
          <el-table-column label="等级名称" prop="gradeName"></el-table-column>
          <el-table-column label="佣金比例" prop="commissionRate"></el-table-column>
          <el-table-column label="合伙人人数" prop="partnerNum">
            <template slot-scope="scope">
              <el-button type="text" @click="jumpPartner(scope.row)">{{scope.row.partnerNum}}</el-button>
            </template>
          </el-table-column>
          <el-table-column width="240px" label="操作" align="right" fixed="right">
            <template slot-scope="scope">
              <el-button type="text" size="medium" @click="handleUpdate(scope.row)">编辑</el-button>
              <el-popconfirm title="您确定删除吗？" @onConfirm="handleDelete(scope.row)">
                <el-button slot="reference" v-if="scope.$index !== 0" type="text">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 列表分页 -->
      <pagination v-show="total>0" :total="total" :page.sync="dataListQuery.currentPage"
        :limit.sync="dataListQuery.size"  @pagination="initgradeList" />

      <!-- 添加/编辑 -->
      <div>
        <el-dialog width="520px" title="添加或编辑等级" v-el-drag-dialog :visible.sync="dialogFormVisible"
          :close-on-press-escape = "false">
          <el-form ref="form" :model="form" :rules="rules" label-position="right" label-width="160px"
            style='width: 80%; margin-left:50px;'>
            <el-row>
              <el-form-item label-width="120px" label="等级名称" prop="gradeName">
                <el-input v-model="form.gradeName" placeholder="请输入等级名称"></el-input>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label-width="120px" label="佣金比例" prop="commissionRate">
                <el-input  v-model="form.commissionRate" placeholder="佣金比例限制在0~100之间">
                  <template slot="append">%</template>
                </el-input>
              </el-form-item>
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="close">取消</el-button>
            <el-button type="primary" @click="saveData">确定</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
  </div>
</template>

<style scoped>

</style>

<script>
  import elDragDialog from '@/directive/el-dragDialog'
  import {
    pagingPartnerGrade,
    savePartnerGrade,
    deleteById
  } from '@/api/user/enterprisePartnerGrade'
  export default {
    directives: {
      elDragDialog
    },
    data() {
      // 供应商名称校验
      var checkGradeName = (rule, value, callback) => {
        if (value && value.trim()) {
          callback()
        } else {
          callback(new Error('等级名称不能为空'))
        }
      }
      return {
        gradeList: [],
        total: 0,
        listLoading: true,
        multipleSelection: [],
        dataListQuery: {
          currentPage: 1,
          size: 10
        },
        form: {
          gradeName: '',
          commissionRate: ''
        },
        dialogFormVisible: false,
        // 等级类型：1-一级合伙人，2-二级合伙人
        partnerType: 1,
        rules: {
          commissionRate: [
            { required: true, message: '只能输入大于0小于100的整数', trigger: 'blur' },
            { pattern: /^(?:0|[1-9][0-9]?|100)(\.[0-9]{0,4})?$/, message: '只能输入大于0小于100的数值,最多保留2位小数' }
          ],
          gradeName: [{
            required: true,
            message: '请输等级名称',
            trigger: 'blur'
          },
          {
            validator: checkGradeName,
            trigger: 'blur'
          }]
        }
      }
    },
    // 初始化页面
    created() {
      this.initgradeList()
    },
    methods: {
      close() {
        this.dialogFormVisible = false
        this.$nextTick(() => {
          this.$refs['form'].clearValidate()
        })
      },
      initgradeList() {
        this.dataListQuery.enterpriseId = this.getEnterpriseId()
        this.dataListQuery.partnerType = this.partnerType
        pagingPartnerGrade(this.dataListQuery).then(response => {
          this.gradeList = response.data.records
          this.total = response.data.total
          this.listLoading = false
        })
      },
      handleSearch() {
        this.dataListQuery.currentPage = 1
        this.initgradeList()
      },
      // 添加
      buttonAdd() {
        const originData = this.$options.data()
        this.form = originData.form
        this.dialogFormVisible = true
      },
      // 保存
      saveData() {
        const that = this
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.form.enterpriseId = this.getEnterpriseId()
            this.form.partnerType = this.partnerType
            this.form.gradeName = this.form.gradeName.trim()
            savePartnerGrade(this.form).then((response) => {
              if (response.isError) {
                return
              }
              that.initgradeList()
              that.dialogFormVisible = false
              this.msgSuccess('保存成功!')
            })
          }
        })
      },
      // 编辑
      handleUpdate(row) {
        this.form = Object.assign({}, this.form, row) // copy obj
        this.dialogFormVisible = true
      },
      // 跳转合伙人
      jumpPartner(row) {
        const routeData = this.$router.resolve({
          path: '../../partner/index',
          query: {
            partnerGradeId: row.partnerGradeId
          }
        })
        const newWindow = window.open(routeData.href, row.partnerGradeId)
        newWindow.onload = () => (newWindow.document.title = '一级合伙人')
      },
      // 删除
      handleDelete(row) {
        deleteById(row.partnerGradeId).then((response) => {
          if (response.isError) return
          this.initgradeList()
          this.msgSuccess('删除成功!')
        })
      }
    },
    mounted() {

    }
  }
</script>
